<!-- 新增角色 -->
<template>
  <div>
    <a-modal 
      :title="$t('New-role')"
      width='30%'
      v-model='addRole_dialog'
      @cancel='cancelHandle'
      @ok='submitAddRole'
      :cancelText="$t('Cancel')"
      :okText="$t('Sure')"
      :maskClosable='false'
      v-dragModal
    >
      <a-form :form='form'>
        <a-form-item :label="$t('Role-name')" v-bind='formlayout' has-feedback>
          <a-input v-decorator="['name',{
            rules:[
              {required:true,message:$t('Enter')+$t('Role-name')},
              {pattern:/^([\u4e00-\u9fa5]|[a-zA-Z])[a-zA-Z\u4e00-\u9fa5\d_:-]{2,30}$/,message:$t('Not_enter_special_characters7')}
            ]
          }]" :placeholder="$t('Enter')+$t('Role-name')">
          <!-- 允许输入中文、字母、数字、下划线、中划线与冒号，且必须以中文或字母开头，长度控制在3~32个字符 -->
          </a-input>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import request from '@/request/request'
export default {
  name: "AddCustomRole",
  props: {
    visible: {
      type: Boolean,
      required: true
    },
  },
  data() {
    return {
      form:this.$form.createForm(this),
      addRole_dialog: false,
      formlayout:{
        labelCol:{span:6},
        wrapperCol:{span:17}
      },
    }
  },

  mounted() {
    this.addRole_dialog = this.visible;
  },

  methods: {
    //提交编辑角色
    submitAddRole(e) {
      e.preventDefault();
      this.form.validateFields((err,value)=>{
        if(!err) {
          request('put', 'usermanager/role/',{
            name: value.name
          }).then(res => {
            this.cancelHandle();
            this.$emit('updateCustomList');
            this.model(res.data.id) //返回模板
            this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
          })
        }
      })
    },

    //关闭编辑弹窗
    cancelHandle() {
      this.$emit('closeRoleDialog', 'add');
    },
  },
}
</script>
